<template>
	<view class="order">
		<scroll-view scroll-x >
			<view class="tabs">
				<block v-for="(tab, tabIndex) in tabs" :key="tabIndex">
					<view class="tab-item" :class="{'active': current === tabIndex}" @click="changeTab(tab, tabIndex)">
						<text>{{ tab.title }}</text>
					</view>
				</block>
			</view>
		</scroll-view>
		
		<view class="container">
			<picker class="time-picker flex align-center justify-center" fields="month" @change="bindPickerChange" mode="date" :value="date" :start="startDate" :end="endDate">
				<view class="flex-1 flex align-center justify-center">
					<text>{{ params.start_time ? `${params.start_time}至${params.end_time}` : '按时间选择' }}</text>
					<text class="iconfont">&#xe64c;</text>
				</view>
			</picker>
			
			<view class="list">
				<view class="item" v-for="(item, index) in lists" :key="index">
					<view class="flex align-center justify-between">
						<view class="car-name">
							<text>{{ item.title }}</text>
						</view>
					</view>
					<view class="info">
						<view v-for="(item2, index2) in item.data" :key="index2" class="flex align-center justify-between">
							<text>{{ item2.title }}：</text>
							<text>{{ item2.value }}</text>
						</view>
					</view>
					<view class="flex align-center justify-between padding-t16">
						<view class="status text-overflow-hidden-1" :class="item.status === 0 ? 'status-active' : (item.status === 1 ? 'status-complate' : '')">
							{{ item.status_msg }}
						</view>
						<view class="btn" @click="goDetail(item)">
							<text>详情</text>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="!loading && lists.length === 0" class="flex align-center justify-center" style="width: 100%;height: 40vh;">
				<text class="font-size-24 text-muted">暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	
	export default {
		data() {
			return {
				current: 0,
				tabs: [],
				params: {
					status: '',
					start_time: '',
					end_time: '',
					formtype: '',
					limit: '',
					page: ''
				},
				lists: [],
				total: 0,
				loading: true,
				load:true
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			...mapState('common', ['status'])
		},
		onLoad(options) {
			this.params.status = this.status
			this.$store.commit('common/SET_STATUS', '')
		},
		onShow() {
			this.params.page = 1
			this.orderStatusTabs()
			this.getLists()
		},
		onReachBottom() {
			if (this.load) {
				this.params.page++
				this.getLists()
			}
		},
		onShareAppMessage() {},
		onShareTimeline() {},
		methods: {
			orderStatusTabs() {
				this.$api.orderStatusTabsApi().then(res=>{
					this.tabs = res.data
					if (this.params.status) {
						let index = this.tabs.findIndex(item=> item.value === this.params.status)
						this.current = index
					}
				}).catch(err=> {
					console.log(err);
				})
			},
			getLists() {
				this.$api.orderListApi(this.params).then(res=>{
					this.total = res.count
					if(this.params.page === 1) {
						this.lists = []
					}
					const oldList = [...this.lists]
					oldList.push(...res.data)
					
					this.lists = oldList
					if (this.total <= this.lists.length) {
						this.load = false
					}
					this.loading = false
				}).catch(err=> {
					this.loading = false
					console.log(err);
				})
			},
			// 前往详情
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/detail/detail?orderId='+item.id
				})
			},
			changeTab(item, index) {
				this.current = index
				this.params.page = 1
				this.params.status = item.value
				this.getLists()
			},
			bindPickerChange(event) {
				const {value} = event.detail
				const year = this.$formatTime(value, 'YYYY')
				const month = this.$formatTime(value, 'MM')
				let days = new Date(year, month, 0).getDate()
				this.params.start_time = `${year}-${month}-01`
				this.params.end_time = `${year}-${month}-${days}`
				this.params.page = 1
				this.getLists()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 60;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order{
		box-sizing: border-box;
		
		.tabs{
			display: flex;
			flex-shrink: 0;
			padding: 0 32rpx;
			align-items: center;
			box-sizing: border-box;
			border-bottom: 1px solid #F1F1F1;
			
			.tab-item{
				flex-shrink: 0;
				color: #333333;
				font-weight: 400;
				padding: 14rpx 24rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 160.02%;
				display: inline-block;
			}
			
			.active{
				position: relative;
				color: #000000;
				font-weight: 600;
				font-size: 34rpx;
				line-height: 48rpx;
				
				&::after{
					position: absolute;
					content: '';
					left: 5%;
					right: 0;
					bottom: 0;
					width: 90%;
					height: 4rpx;
					border-radius: 100rpx;
					background-color: var(--primary-color);
				}
			}
		}
	
		.container{
			padding: 32rpx;
			
			.time-picker{
				height: 64rpx;
				color: #333333;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 40rpx;
				margin-bottom: 32rpx;
				border-radius: 12rpx;
				background-color: #FFFFFF;
				box-shadow: 0px 0px 100rpx rgba(0, 0, 0, 0.04);
				
				.iconfont{
					display: flex;
					font-size: 24rpx;
					font-weight: 600;
					padding-left: 16rpx;
				}
			}
			
			.item{
				flex-shrink: 0;
				padding: 32rpx;
				margin-bottom: 32rpx;
				border-radius: 12rpx;
				background-color: #FFFFFF;
				
				.car-name{
					color: #000000;
					font-weight: 600;
					font-size: 34rpx;
					line-height: 44rpx;
				}
				
				.car-type{
					color: #000000;
					font-weight: 400;
					font-size: 28rpx;
					line-height: 44rpx;
					padding-left: 8rpx;
					display: inline-block;
				}
				
				.num-wrap{
					font-weight: 400;
					font-size: 34rpx;
					line-height: 44rpx;
					color: #000000;
				}
				
				.num{
					color: #ED7B2F;
					font-weight: 600;
				}
				
				.attr{
					font-weight: 400;
					font-size: 26rpx;
					line-height: 44rpx;
					color: rgba(0, 0, 0, 0.3);
				}
				
				.info{
					font-weight: 400;
					font-size: 26rpx;
					padding-top: 6rpx;
					line-height: 44rpx;
					color: rgba(0, 0, 0, 0.6);
				}
				
				.status{
					max-width: 400rpx;
					padding: 0 16rpx;
					height: 48rpx;
					font-weight: 400;
					font-size: 24rpx;
					display: flex;
					line-height: 40rpx;
					border-radius: 4rpx;
					align-items: center;
					color: rgba(0, 0, 0, 0.6);
					background: rgba(0, 0, 0, 0.1);
				}
				
				.status-active{
					color: #FFFFFF;
					background: #ED7B2F;
				}
				
				.status-complate{
					color: #FFFFFF;
					background-color: rgba(87, 147, 127, 1);
				}
				
				.btn{
					width: 180rpx;
					height: 64rpx;
					display: flex;
					color: #FFFFFF;
					flex-shrink: 0;
					font-size: 24rpx;
					font-weight: 400;
					margin-left: 40rpx;
					align-items: center;
					border-radius: 100rpx;
					justify-content: center;
					background-color: #0052D9;
				}
			}
		}
	}
</style>
